<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue内置指令</title>
    <style type="text/css">
       [v-cloak]{
           display: none;
       }

        table,th,td{
            border: 1px solid green;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>
            vue内置指令用法演示
        </legend>
        <p>
            Vue.js的指令是带有特殊前缀“v-”的HTML特性 ，它绑定一个表达式，并将一些特性应用到DOM 上。
        </p>
        <fieldset>
            <legend>基本指令——“v-cloak”</legend>
            <p>v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和css的display:none配合使用</p>
           <!-- 在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用
            这里虽然己经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没加载完时，
            在页面上会显示{{message}}的字样，直到Vue创建实例、编译模板时， DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句css就可以解决这个问题了：
            [v-cloak]{
                display: none;
            }-->
            <div id="app1" v-cloak>
               {{message}}
            </div>
        </fieldset>
        <fieldset>
            <legend>基本指令——“v-once”</legend>
            <p>v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。
                首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。v-once在业务中也很少使用，当你需要进一步优化性能时，可能会用到。</p>
            <div id="app2" v-once>
                {{msg}}
            </div>
        </fieldset>
        <fieldset>
            <legend>条件渲染指令——“v-if、v-else-if、v-else”</legend>
            <p>Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件</p>
            <div id="app3">
                <!--v-else-if要紧跟v-if, v-else要紧跟v-else-if或v-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。-->
                <div v-if="status==1">当status等于1时显示该行</div>
                <div v-else-if="status==2">当status等于2时显示该行</div>
                <div v-else>否则显示该行</div>
                <hr/>
                <!--如果一次判断的是多个元素，可以在Vue扣内置的<template> 元素上使用条件指令，最终渲染的结果不会包含该元素-->
                <template v-if="status==1">
                    <div>这是status等于1显示的一段文本内容</div>
                    <p>这是status等于1显示的一段文本内容</p>
                    <span>这是status等于1显示的一段文本内容</span>
                </template>
                <template v-else-if="status==2">
                    <div>这是status等于2显示的一段文本内容</div>
                    <div>这是status等于2显示的一段文本内容</div>
                </template>
                <template v-else>
                    <p>否则显示的一段文本内容</p>
                    <p>否则显示的一段文本内容</p>
                </template>
                <hr/>
                <p>Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染</p>
                <template v-if="type1=='name'">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名">
                </template>
                <template v-else>
                    <label>邮箱：</label>
                    <input type="text" placeholder="请输入邮箱">
                </template>
                <button @click="handleToggleClick1">切换输入类型</button>
                <p>
                    输入内容后，点击切换按钮，虽然DOM变了，但是之前在输入框输入的内容并没有改变，只是替换了placeholder 的内容，说明input元素被复用了。
                    如果你不希望Vue这样做，可以使用Vue提供的key属性，它可以让你自己决定是否要复用元素， key的值必须是唯一的
                </p>
                <template v-if="type2=='name'">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名" key="name-input">
                </template>
                <template v-else>
                    <label>邮箱：</label>
                    <input type="text" placeholder="请输入邮箱" key="mail-input">
                </template>
                <button @click="handleToggleClick2">切换输入类型</button>
                <p>
                    给两个input元素都增加key后，就不会复用了，切换类型时键入的内容也会被删除，不过label元素仍然是被复用的，因为没有添加key属性。
                </p>
            </div>
        </fieldset>
        <fieldset>
            <legend>基本指令——“v-show”</legend>
            <p>v-show的用法与v-if基本一致，只不过v-show是改变元素的css属性display。
                当v-show 表 达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式 display:none;</p>
            <div id="app4">
               <p v-show="status==1">当status等于1时会显示</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>列表渲染指令——“v-for”</legend>
            <p>当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似 item in items 的形式</p>
            <div id="app5">
                <table>
                    <tr>
                        <th>书名</th>
                        <th>价格</th>
                    </tr>
                   <!-- 在表达式中，books是数据， book是当前数组元素的别名 ，循环出的每个tr内的元素都可以访问到对应的当前数据book。-->
                    <tr v-for="book in books">
                        <td>{{book.name}}</td>
                        <td>{{book.price}}</td>
                    </tr>
                </table>
                <ul>
                    <!--列表渲染也支持用of来代替in作为分隔符-->
                    <li v-for="book of books">{{book.name}}--{{book.price}}</li>
                </ul>
                <table>
                    <tr>
                        <th>索引</th>
                        <th>序号</th>
                        <th>书名</th>
                        <th>价格</th>
                    </tr>
                    <!--v-for的表达式支持一个可选参数作为当前项的索引，分隔符 in 前的语句使用括号，第二项就是books当前项的索引-->
                    <tr v-for="(book,index) in books">
                        <td>{{index}}</td>
                        <td>{{index+1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.price}}</td>
                    </tr>
                </table>
                <ul>
                    <!--v-for也可以用在内置标签<template>上，将多个元素进行渲染-->
                    <template v-for="book of books">
                        <li>{{book.name}}</li>
                        <li>{{book.price}}</li>
                    </template>
                </ul>
                <hr/>
                <p>除了数组外，对象的属性也是可以遍历的</p>
                <!--遍历user对象的属性-->
                <span v-for="value in user">{{value}}、</span>
                <hr/>
                <p>遍历对象属性时，有两个可选参数，分别是键名和索引：</p>
                <template v-for="(value,key,index) in user">
                    <span>{{index}}-</span>
                    <span>{{key}}:{{value}}</span>
                    <p></p>
                </template>
                <hr/>
                <p>v-for还可以迭代整数</p>
                <span v-for="n in 10">{{n}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>事件绑定指令——“v-on”</legend>
            <p>v-on 用在事件绑定上</p>
            <div id="app6">
                <!--设置一个计数器，每次点击都加1-->
                点击次数：{{counter}}
                <!--@click等同于v-on:click,是一个语法糖
                @click的表达式可以直接使用JavaScript语句 ，也可以是一个在Vue实例中methods选项内的函数名
                -->
                <br/>
                <button @click="counter++">点击+1（直接使用JavaScript语句）</button>
                <button @click="handleAdd()">点击+1(调用handleAdd方法)</button>
                <!--需要注意的是，@click调用的方法名后可以不跟括号“()”，如果方法不需要传入参数 ，为了简便可以不写括号。-->
                <button @click="handleAdd">点击+1(调用handleAdd方法（不跟括号“()”）)</button>
                <br/>
                <p>Vue提供了一个特殊变量$event，用于访问原生DOM事件，例如下面的实例可以阻止链接打开</p>
                <a href="http://www.cnblogs.com" @click="handleClick('禁止打开',$event)">访问博客园</a>
                <!--event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。
                例如：@click.prevent，这样写就可以阻止元素发生默认的行为
                -->
                <a href="http://www.baidu.com" @click.prevent="handle('禁止打开')">访问百度</a>
                <hr/>
                <fieldset>
                    <legend>监听键盘事件</legend>
                    按下键盘的回车键：<input type="text" @keyup.enter="handleKeyUp">
                    按下键盘的Tab键：<input type="text" @keyup.tab="handleKeyUp">
                    按下键盘的Delete键和Backspace(退格键)：<input type="text" @keyup.delete="handleKeyUp">
                    按下键盘的Esc键：<input type="text" @keyup.esc="handleKeyUp">
                    按下键盘的空格键：<input type="text" @keyup.space="handleKeyUp">
                    按下键盘的向上键：<input type="text" @keyup.up="handleKeyUp">
                    按下键盘的向下键：<input type="text" @keyup.down="handleKeyUp">
                    按下键盘的向左键：<input type="text" @keyup.left="handleKeyUp">
                    按下键盘的向右键：<input type="text" @keyup.right="handleKeyUp">
                    <! -- Shift + S -->
                    按下组合键(Shift + S)：<input type="text" @keyup.shift.83="handleKeyUp">
                </fieldset>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            message:"v-cloak指令用法！"
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
            msg:"v-once指令用法！"
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            status:1,
            type1:'name',
            type2:'mail'
        },
        methods:{
            handleToggleClick1:function () {
               if(this.type1=='name'){
                   this.type1='mail';
               }else {
                   this.type1='name';
               }
            },
            handleToggleClick2:function () {
                //js的三元运算符，达到的效果和上面的if...else...判断方式一致
                this.type2=this.type2 == 'name' ? 'mail' : 'name';
            }
        }
    });

    var app4 = new Vue({
        el:"#app4",
        data:{
            status:2
        }
    });

    var app5 = new Vue({
        el:"#app5",
        data:{
            books:[
                {name:"《Vue.js实战》",price:79.00},
                {name:"《JavaScript高级教程》",price:120.00},
                {name:"《Java从入门到放弃》",price:80.00}
            ],
            user:{
                name:'孤傲苍狼',
                age:29,
                sex:'男'
            }
        }
    });

    var app6=new Vue({
        el:"#app6",
        data:{
            counter:0
        },
        methods:{
            handleAdd:function () {
                this.counter=this.counter+1;
            },
            handleClick:function (msg,event) {
                event.preventDefault();//preventDefault方法阻止元素发生默认的行为（例如，点击超链接时不跳转）
                alert(msg);
            },
            handle:function (msg) {
                alert(msg);
            },
            handleKeyUp:function (event) {
                console.log(event);
                alert("按下"+event.code+"("+(event.keyCode)+")");
            }
        }
    });
</script>